<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="/static/base/common/css/sapar.css"/>
    <link rel="stylesheet" href="/static/base/static/css/index_inner.css"/>
    <link rel="stylesheet" type="text/css" href="/static/webjars/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="/static/webjars/layui/css/modules/layer/default/layer.css" media="all">
    <title>居民与房屋管理-主页</title>
    <style type="text/css">
        .red{
            border: 1px red solid;
        }

    </style>
</head>

<body>

<form class="layui-form" action="" style="margin-top: 20px;" lay-filter="Proprietor">
    <div class="layui-collapse" lay-filter="test">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">出租房信息</h2>
            <div class="layui-colla-content layui-show">
                <table class="layui-table">
                    <tr>
                        <td width="150px">户主姓名</td>
                        <td>
                            <div class="layui-inline">
                                <input type="text" name="name"  autocomplete="off" placeholder="请输入户主姓名" class="layui-input">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>联系电话</td>
                        <td>
                            <div class="layui-inline">
                                <input type="text" name="telphone"  autocomplete="off" placeholder="请输入联系电话"  class="layui-input">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td >房屋地址</td>
                        <td >
                            <div class="layui-input-inline">
                                <select name="province" disabled>
                                    <option value="51" selected >四川省</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="city" disabled>
                                    <option value="5115" selected>宜宾市</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="county" disabled>
                                    <option value="511528" selected>兴文县</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="townId" id="townId" lay-filter="townId"></select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="villageId" id="villageId" lay-filter="villageId"></select>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>详细地址</td>
                        <td>
                            <div class="layui-inline">
                                <input type="text" name="addr"  autocomplete="off" placeholder="请输入详细地址" class="layui-input">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>房型</td>
                        <td>
                            <div class="layui-inline">
                                <input type="text" id="houseType" name="houseType" autocomplete="off"  class="layui-input">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>楼层</td>
                        <td>
                            <div class="layui-inline">
                                <input type="text"  name="floorCount" autocomplete="off"  class="layui-input">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>朝向</td>
                        <td>
                            <div class="layui-inline">
                                <select name="sunrise" lay-verify="required">
                                    <option value="" selected="" disabled="disabled"></option>
                                    <option value="向北">向北</option>
                                    <option value="向南">向南</option><!-- disabled = "" 则是不可选 -->
                                    <option value="向东">向东</option>
                                    <option value="向西">向西</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>房屋面积</td>
                        <td>
                            <div class="layui-inline">
                                <input type="text"  name="areaBuild" lay-verify="intNum" autocomplete="off"  class="layui-input">
                            </div>
                        </td>
                    </tr>


                    <tr>
                        <td>房屋状态</td>
                        <td>
                            <div class="layui-inline">
                                <select name="status">
                                    <option value="" selected="" disabled="disabled"></option>
                                    <option value="正常">正常</option>
                                    <option value="出租">出租</option>
                                    <option value="求租">求租</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>出租价格</td>
                        <td>
                            <div class="layui-inline">
                                <input type="text"  name="price" autocomplete="off"  class="layui-input">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>装修情况</td>
                        <td>
                            <div class="layui-inline">
                                <textarea placeholder="请输入内容" class="layui-textarea" name="decorationStatus"></textarea>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="width: 98%;margin: 20px auto">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>




</body>
<script type="text/javascript" src="/static/webjars/layui/layui.all.js"></script>
<script type="text/javascript" src="/static/base/common/js/jquery.js"></script>
<script type="text/javascript" src="/static/base/common/js/sapar.js"></script>
<script type="text/javascript" src="/static/base/static/js/index_inner.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit;

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');
        var pattern_number = /\d+/;
        //自定义验证规则

        form.verify({
            intNum: function (value) {
                if (!value.match(pattern_number)) {
                    return '请填写数字！';
                }
            }
        });

        function checkNotNull(){
            var flag = true;
            $("input[type='text']").each(function(){

                if ("" == $(this).val()) { //判断元素对象的value值
                    $(this).addClass("red"); //添加css样式
                    flag = false;
                }else{
                    $(this).removeClass("red");
                }
                var divBox = $(this).parent().parent().parent().parent().parent().parent();
                if($(this).attr("class") =="layui-input red" && divBox.attr("class") != "layui-colla-content layui-show"){
                    divBox.addClass("layui-show")
                }

            });
            return flag;
        }


        $.ajax({
            type:"post",
            url:"/ajax/city-house/getcityhouseinfobyid2",
            dataType : "json",//返回类型
            contentType : "application/x-www-form-urlencoded; charset=utf-8",
            data : {//传输controller的键值对
                "id" : GetRequest()
            },
            success : function(house) {//成功后执行并取值

                form.val('Proprietor', {
                    "name": house.data.name  // "name": "value"
                    ,"province": house.data.province
                    ,"city": ""+house.data.city
                    ,"county": house.data.county
                    ,"telphone": house.data.telphone
                    ,"floorCount": ""+house.data.floorCount
                    ,"status": house.data.status
                    ,"areaBuild": house.data.areaBuild
                    ,"houseType": house.data.houseType
                    ,"sunrise": house.data.sunrise
                    ,"price": house.data.price
                    ,"decorationStatus": house.data.decorationStatus
                    ,"addr": house.data.addr
                })


            },
            error: function(){
                parent.layer.closeAll('iframe');//关闭弹窗
            }
        });


        //监听提交
        form.on('submit(demo1)', function(data){
            var flag= true;//判断是否数据格式都填写正确
            console.log(flag);
            if(!checkNotNull()){
                layer.msg('还有未填写的地方哦',{time:2000, shift: 6, icon:5},function(){});
                flag = false;
            }else {
                flag = true;
            }


            //用户id

            //身份验证
            if(flag){
                $.get("/ConfirmUser",{"UserName":data.field.name,"TellPhone":data.field.telphone},function(result){
                    if(result == -1)
                        layer.msg("用户名和电话不匹配");
                    else{

                        data.field.floor = data.field.floorCount;
                        data.field.facilities = data.field.decorationStatus;
                        data.field.filenumber = 1;
                        data.field.village = data.field.villageId;
                        data.field.id = GetRequest();
                        data.field.town = data.field.townId;
                        data.field.address = data.field.addr;
                        data.field.tellphone = data.field.telphone;
                        /////////////////提交操作///////////////
                        data.field.userId = result;
                        layer.msg("提交中");
                        console.log(data.field);
                        $.ajax({
                            url: "/ajax/save/cityhouseinfo",
                            type: "POST",
                            contentType: 'application/json;charset=utf-8',
                            //设置请求头信息
                            dataType: "json",
                            data: JSON.stringify(data.field),
                            success: function (data) {
                                layer.msg(data.code);
                                nowtimestamp = (new Date()).getTime();
                            },
                            error: function (res) {
                                layer.msg(res);
                            }
                        });

                    }
                });

            }
            return false;
        });


        var check;
        $.post("/ajax/pub/gettown",{code: "511528"},
            function (result) {
                //输出
                //执行清空
                $("#townId").empty();
                $("#villageId").empty();
                for(i = 0; i < result.length; i++){
                    document.getElementById("townId").options.add(new Option(result[i].townName,result[i].townId));
                }
                form.render();


                setInterval(function(){
                    if(check == undefined){
                        check = $('#townId').val();
                        $.post("/ajax/pub/getvillage",{code: check},
                            function (result) {
                                //输出
                                //执行清空
                                $("#villageId").empty();
                                for(i = 0; i < result.length; i++){
                                    document.getElementById("villageId").options.add(new Option(result[i].villageName,result[i].villageId));
                                }
                                form.render();
                            }
                        );
                    }else if(check != ($('#townId').val())){
                        check = $('#townId').val();
                        $.post("/ajax/pub/getvillage",{code: check},
                            function (result) {
                                //输出
                                //执行清空
                                $("#villageId").empty();
                                for(i = 0; i < result.length; i++){
                                    document.getElementById("villageId").options.add(new Option(result[i].villageName,result[i].villageId));
                                }
                                form.render();
                            }
                        );
                    }
                },500);
            }
        );


        function GetRequest() {
            var url = location.search; //获取url中"?"符后的字串
            if (url.indexOf("?") != -1) {    //判断是否有参数
                var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
                strs = str.split("=");   //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）
                return strs[1];          //直接弹出第一个参数 （如果有多个参数 还要进行循环的）
            }
        }

    });
</script>

</html>

